<template>
  <div class="home-aside">
    <div class="user-info" v-if="userInfo !== null" @click="signOut">
      <el-avatar
        class="user-avater"
        size="medium"
        :src="userInfo.avatarUrl + '?param=80y80'"
        lazy="loaded"
      ></el-avatar>
      <span class="user-name">
        {{ userInfo.nickname }}
      </span>
    </div>
    <div class="user-info" v-else @click="SignIn">
      <el-avatar class="user-avater" size="medium"></el-avatar>
      <span class="user-name">未登录</span>
    </div>

    <el-menu
      :default-active="activeRoute"
      class="el-menu-vertical-demo"
      :router="true"
      active-text-color="#d74d45"
    >
      <el-menu-item index="/discovery">
        <i class="el-icon-menu"></i>
        <span slot="title">发现音乐</span>
      </el-menu-item>
      <el-menu-item index="/playlists">
        <i class="el-icon-document"></i>
        <span slot="title">推荐歌单</span>
      </el-menu-item>
      <el-menu-item index="/newsongs">
        <i class="el-icon-setting"></i>
        <span slot="title">最新音乐</span>
      </el-menu-item>
      <el-menu-item index="/newmv">
        <i class="el-icon-setting"></i>
        <span slot="title">最新MV</span>
      </el-menu-item>
      <!-- 歌单 -->
      <el-submenu index="5" v-if="myList.length > 0">
        <template slot="title">
          <span>创建的歌单</span>
        </template>
        <el-menu-item
          v-for="(item, index) in myList"
          :key="index"
          :index="`/playlist/${item.id}`"
        >
          <i class="el-icon-setting"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="6" v-if="CollectionList.length > 0">
        <template slot="title">
          <span>收藏的歌单</span>
        </template>
        <el-menu-item
          v-for="(item, index) in CollectionList"
          :key="index"
          :index="`/playlist/${item.id}`"
        >
          <i class="el-icon-setting"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <el-dialog title="登录" :visible.sync="loginVisible" width="30%">
      <div>
        <div class="login-body">
          <div class="input">
            <el-input
              placeholder="请输入您的网易云uid"
              v-model="loginInput"
              clearable
            >
            </el-input>
          </div>
          <div class="login-help">
            <p class="help">
              1、请
              <a href="http://music.163.com" target="_blank"
                >点我(http://music.163.com)</a
              >打开网易云音乐官网
            </p>
            <p class="help">2、点击页面右上角的“登录”</p>
            <p class="help">3、点击您的头像，进入我的主页</p>
            <p class="help">
              4、复制浏览器地址栏 /user/home?id= 后面的数字（网易云 UID）
            </p>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="loginCommit">登 录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { UID, setCookie, getCookie, delCookie } from "@/utils/cookie";
import { userSignIn, getUserPlayList } from "@/network/user";
export default {
  name: "homeAside",
  data() {
    return {
      loginVisible: false,
      loginInput: "480833876",
      // 用户信息
      userInfo: null,
      // 用户所有的播放列表
      playlist: [],
      // 用户自己创建的列表
      myList: [],
      // 用户收藏的列表
      CollectionList: [],

      activeRoute: ""
    };
  },
  created() {
    const uid = getCookie(UID);
    if (uid) {
      this.loginInput = uid;
      this.loginCommit();
    }
  },
  methods: {
    // 弹出登录界面
    SignIn() {
      this.loginVisible = true;
    },
    // 弹出注销界面
    signOut() {
      this.$confirm("确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.signOutCommit();
        this.$message({
          type: "success",
          message: "已退出!"
        });
      });
    },
    // 注销
    signOutCommit() {
      delCookie(UID);
      this.userInfo = null;
      this.myList = [];
      this.CollectionList = [];
      this.playlist = [];
    },
    // 登录
    loginCommit() {
      this.loginVisible = false;
      if (this.loginInput) {
        userSignIn(this.loginInput).then(res => {
          if (!res || res.code !== 200) {
            return this.$message.error("登陆失败，请确认UID正确");
          }
          const userID = res.profile.userId;
          setCookie(UID, userID);
          this.$store.commit("saveUserID", userID);
          this.userInfo = res.profile;
          this.getUserPlayList();
        });
      }
    },
    // 获取用户歌单
    getUserPlayList() {
      getUserPlayList(this.userInfo.userId, 1000).then(res => {
        if (res.code === 200) {
          this.myList = [];
          this.CollectionList = [];
          this.playlist = res.playlist;
          for (const i in this.playlist) {
            if (this.playlist[i].userId === this.userInfo.userId) {
              this.myList.push(this.playlist[i]);
            } else {
              this.CollectionList.push(this.playlist[i]);
            }
          }
        }
      });
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.activeRoute = route.path;
      },
      immediate: true
    }
  }
};
</script>
<style lang="less" scoped>
.home-aside {
  .user-info {
    display: flex;
    align-items: center;
    height: 0.439239rem;
    padding: 0 0.146413rem;
    cursor: pointer;
    .user-avater {
      // margin: 0 0.11713rem;
      width: 0.292826rem;
      height: 0.292826rem;
      margin-right: 5px;
    }
    .user-name {
      font-size: 0.102489rem;
    }
  }
}
/deep/.el-menu-item,
/deep/.el-submenu__title {
  font-size: 0.087848rem !important;
  padding: 0 0.146413rem !important;
}
.help a {
  color: red;
}
</style>
